import Loading from './loading'
import createLoadingLikeDirective from '@/assets/js/create-loading-like-directive'

const loadingDirective = createLoadingLikeDirective(Loading)
export default loadingDirective

// import { createApp } from 'vue'
// import Loading from './loading'
// import { addClass, removeClass } from '@/assets/js/dom'

// const relativeCls = 'g-relative'
// const loadingDirective = {
//   mounted(el, binding) {
//     const app = createApp(Loading)
//     const instance = app.mount(document.createElement('div'))
//     // 让el节点上拥有instance(loading)实例
//     el.instance = instance
//     // 从指令中获取arg内容
//     const title = binding.arg
//     if (typeof title !== 'undefined') {
//       // 从loading中获取setTitle方法
//       instance.setTitle(title)
//     }
//     if (binding.value) {
//       append(el)
//     }
//     console.log(el)
//   },
//   updated(el, binding) {
//     const title = binding.arg
//     if (typeof title !== 'undefined') {
//       el.instance.setTitle(title)
//     }
//     // 判断是否要移除loading(因为只有在更新时候才去判断是否要loading)
//     if (binding.value !== binding.oldValue) {
//       binding.value ? append(el) : remove(el)
//     }
//   }
// }
// // 加入节点
// function append(el) {
//   /*
//     这里就是说，万一就是样式里是static的样式，如果你也想添加v-loading就要到样式去修改了，
//     而如果有下面这段代码，就可以动态的添加定位属性样式，如下面添加relativeCls
//   */
//   const style = getComputedStyle(el)
//   if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
//     addClass(el, relativeCls)
//   }
//   // el.instance.$el 为一个dom节点
//   el.appendChild(el.instance.$el)
// }
// // 移除节点
// function remove(el) {
//   removeClass(el, relativeCls)
//   el.removeChild(el.instance.$el)
// }

// export default loadingDirective
